<template>
	<view>
		<u-sticky>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="60" bar-height="4"
			 active-color="#F5B340" font-size="36rpx" inactive-color="#999999"></u-tabs>
		</u-sticky>
		<view class="">
			<u-empty text="暂无数据" mode="list" v-if="!deliveryList.length" margin-top="200"></u-empty>
			<block v-for="(item,index) in deliveryList" :key="item.id" v-else>
				<view class="item u-flex u-col-center u-row-between u-margin-bottom-20">
					<view class="u-flex u-col-center">
						<view class="icon-90 u-flex u-col-center u-row-center">
							<image class="" src="../../../static/images/chick7.png" mode=""></image>
						</view>
						<view class="">
							<view class="lable">{{!current?"待配送":"已配送"}}{{item.name}}</view>
							<view class="desc">{{item.num}}只</view>
						</view>
					</view>
					<view class="delivery-btn" @click="show(item)" v-show="current===0">立即配送</view>
					<view class="delivery-btn" v-show="current===1">
						<navigator :url="`/mine/orderDetail/orderDetail?order_id=${item.order_id}`">
							查看订单
						</navigator>
					</view>
				</view>
			</block>
			<u-loadmore :status="status" @loadmore="onreachBottom" v-if="deliveryList.length"/>
		</view>
		<!-- 地址选择 -->
		<u-mask :show="isAddressMadal" @click="isAddressMadal = false">
			<view class="select-address-madal u-flex u-flex-col u-col-center u-row-center" @click.stop>
				<image src="../../static/images/icon_close@2x.png" mode="" @click="isAddressMadal = false" class="close-icon"></image>
				<image class="goods-img" src="../../static/images/chick5.png" mode="widthFix"></image>
				<view class="m-number-box">
					<u-number-box v-model="value" @change="valChange" :long-press="false" bg-color="#F5B340" color="#FFFFFF" :min="vuex_delivery.num>1?2:0"
					 :max="vuex_delivery.num" :step="2"></u-number-box>
				</view>
				<view class="address" @click="selectAddress">
					<view class="" v-if="vuex_address == null">添加地址</view>
					<view class="" v-else>
						<view class="">
							{{vuex_address.address}}
						</view>
						<view class="">
							<text class="u-margin-right-36">{{vuex_address.mobile}}</text>
							<text>{{vuex_address.name}}</text>
						</view>
					</view>
				</view>
				<view class="submit-btn" @click="distributeChicken">确定</view>
			</view>
		</u-mask>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deliveryList:[],
				status:"loadmore",
				current: 0,
				meta:{
					current_page:0,
					per_page:15
				},
				value:0,
				list: [{
						name: '待配送'
					},
					{
						name: '已配送'
					}
				],
				orderType:'',
				isAddressMadal: false,
			};
		},
		onLoad(options) {
			this.orderType = options.type
			uni.setNavigationBarTitle({
				title:this.vuex_delivery_type[options.type].name
			})
		},
		onReady(){
			this.getDistributioncentre()
		},
		onReachBottom() {
			this.onreachBottom()
		},	
		methods: {
			change(index) {
				this.current = index
				this.meta.current_page = 0
				this.deliveryList = [];
				this.status = "loadmore"
				uni.showLoading({})
				this.getDistributioncentre()
			},
			show(item){
				this.$u.vuex("vuex_delivery",item)
				this.isAddressMadal = true
			},
			onreachBottom(){
				if(this.meta.current_page === this.meta.total_pages){
					this.status = "nomore"
					return false
				}
				this.status = "loading"
				this.getDistributioncentre()
			},
			valChange(e) {},
			selectAddress() {
				uni.navigateTo({
					url: "../../mine/address/address?type=select"
				})
			},
			getDistributioncentre() {
				let params = {
					type: this.current + 1,
					page: this.meta.current_page+1,
					page_size: this.meta.per_page,
					chicken_type:this.vuex_delivery_type[this.orderType].id
				}
				this.$u.api.getDistributioncentre(params).then(res => {
					uni.hideLoading()
					if (res.errno === "000") {
						this.deliveryList = [...this.deliveryList,...res.result.data]
						this.meta = res.result.meta
					}
				}).catch(err => {
					console.log(err);
				})
			},
			distributeChicken() {
				if(this.value<2){
					this.$u.toast("至少两只起送")
					return false;
				}
				if (this.vuex_address == null) {
					this.$u.toast("请先配送选择地址")
					return false
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					chickenorder_id: this.vuex_delivery.chickenorder_id,
					num: this.value,
					address_id: this.vuex_address.id
				}
				this.$u.api.distributeChicken(params).then(res => {
					this.$u.toast(res.errmsg)
					uni.hideLoading()
					if (res.errno === "000") {
						this.isAddressMadal = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>

<style>
	.m-number-box>>>.u-icon-plus.data-v-18418972,
	.m-number-box>>>.u-icon-minus.data-v-18418972 {
		border: 1px solid rgba(245, 179, 64, 1) !important;
		border-radius: 10rpx !important;
	}
</style>
<style lang="scss">
	.item {
		width: 700rpx;
		margin: 0 auto;
		padding: 28rpx 28rpx 28rpx 38rpx;
		box-sizing: border-box;
		margin-bottom: 18rpx;
		border-radius: 12rpx;
	}

	.icon-90 {
		width: 90rpx;
		height: 90rpx;
		/* background:rgba(162,229,216,1); */
		border: 3rpx solid rgba(253, 181, 68, 1);
		border-radius: 50%;
		margin-right: 32rpx;
	}

	.icon-90 image {
		width: 62rpx;
		height: 68rpx;
	}

	.lable {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.desc {
		color: #999999;
		font-size: 28rpx;
	}

	.delivery-btn {
		width: 200rpx;
		height: 60rpx;
		background: rgba(245, 179, 64, 1);
		border: 3rpx solid rgba(204, 126, 43, 1);
		border-radius: 20rpx;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
	}
	
	.select-address-madal {
		width: 691rpx;
		height: 600rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(167, 92, 26, 1);
		border-radius: 20rpx;
		position: absolute;
		top: 174rpx;
		left: 50%;
		transform: translate(-50%, 0);
		overflow: hidden;
		padding: 34rpx 30rpx;
		box-sizing: border-box;
	}
	
	.goods-img {
		width: 110rpx;
		height: 138rpx;
		border-radius: 10rpx;
	}
	
	.address {
		width: 632rpx;
		min-height: 70rpx;
		background: rgba(229, 229, 229, 1);
		border-radius: 10px;
		font-size: 28rpx;
		color: #999999;
		padding: 0 18rpx;
		line-height: 70rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
	}
	
	.m-number-box {
		margin-top: 36rpx;
	}
	
	.receive-content {
		width: 100%;
		height: 500rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx 20rpx 0px 0px;
		overflow: hidden;
	}
	
	.close-icon {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}
	
	.submit-btn {
		width: 240rpx;
		height: 70rpx;
		background: rgba(245, 179, 64, 1);
		border: 3rpx solid rgba(204, 126, 43, 1);
		border-radius: 20rpx;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		line-height: 70rpx;
		margin-top: 30rpx;
	}
	
	.content-header {
		width: 100%;
		height: 82rpx;
		position: relative;
		text-align: center;
		font-size: 36rpx;
		line-height: 82rpx;
	}
	
	.content-header image {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		right: -68rpx;
		top: -60rpx;
	}
	
	.receive-content-scroll {
		height: 100%;
	}
	
	.line-col {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.m-swiper {
		width: 100%;
		height: 300rpx;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
	}
	
	
</style>
